<template>
    <div id="main">
        <router-view v-if="isRouterAlive "></router-view>

        <mt-tabbar v-if="showTab" v-model="selected">
            <mt-tab-item :id="home">
                <img slot="icon" v-if="isActive === 'home'" src="../lib/img/tabs/home-active.png">
                <img slot="icon" v-else src="../lib/img/tabs/home.png">
                首页
            </mt-tab-item>
            <mt-tab-item :id="car">
                <img slot="icon" v-if="isActive === 'car'" src="../lib/img/tabs/message-active.png">
                <img slot="icon" v-else src="../lib/img/tabs/message.png">
                购物车
            </mt-tab-item>
            <mt-tab-item :id="person">
                <img slot="icon" v-if="isActive === 'person'" src="../lib/img/tabs/profile-active.png">
                <img slot="icon" v-else src="../lib/img/tabs/profile.png">
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>
<script>

import { mapState, mapMutations, mapActions } from 'vuex'
import { MessageBox  } from 'mint-ui';
export default {
    data(){
        return {
          isRouterAlive : true,
          selected: sessionStorage.getItem('selected')? JSON.parse(sessionStorage.getItem('selected')):'首页',
          home: '首页',
          car: '购物车',
          person: '我的',
          
        }
    },
    provide(){
        return {
            reload: this.reload,
            goB: this.goB
        }
    }, 

    methods: {
      ...mapMutations([
          'setState',
          'logout'
      ]),
      ...mapActions([
          'changeLogin',
          'saveState'
      ]),

      //刷新方法
      reload(){
            this.isRouterAlive  = false

            this.$nextTick(() =>{           
                this.isRouterAlive  = true       
            })
      },
      //返回上一级方法
      goB(){
          this.$router.go(-1)
      },

      //相应根据身份 设定能访问的路由 ，显示相应的提示
      //例如：不是商家，不能访问管理店铺的路由
      msgInfo(message, router){
        MessageBox({
            title: '提示',
            message,
            showCancelButton: true
        }).then(action => {
            if(action === 'confirm'){
                //修改登陆注册信息
                if(router === '/setShop' || router === '/shop'){
                    //此时发送请求保存注册信息
                    this.changeLogin({data: {uname: this.uname, data: {type: '商家'}}, to: router, router: this.$router})
                    return
                }else if(router === '/login'){
                
                     //此时保存当前用户信息
                     this.saveState({uname: this.uname, router: this.$router})
                    return
                }
                

                
                //其他跳转
                return this.$router.replace(router)
            }

            
        })
      },

      //数据的保存
      sateSave(){
        sessionStorage.setItem('state', JSON.stringify(this.$store.state))
      }
    },

    //监听刷新的时候 保存数据
    mounted() {
        window.addEventListener('unload', this.sateSave)
    },
    computed:{
       ...mapState([
        //    'isRouterAlive',
           'uname',
           'type',
           'isLogin',
           'isActive',
           'showTab'
       ])
    }, 
    watch: {
        selected(val, oldVal){
            sessionStorage.setItem('selected', JSON.stringify(val))
            if(val === this.home){
                this.$router.replace('/home')
                this.setState({isActive: 'home'})

            }else if(val === this.car){

                this.$router.replace('/car')
                this.setState({isActive: 'car'})
            }else if(val === this.person){

                this.$router.replace('/person')
                this.setState({isActive: 'person'})
            }
        },
        
        '$route.path'(val, oldVal){
                if(!this.uname){ 
                    this.setState({isLogin: false})
                }else{
                    this.setState({isLogin: true})
                }
            //因为这里 监听的路由 并不是一个逻辑 而是多个逻辑，因此 使用return 的时候要注意


           this.setState({showTab: true})

            //只要不是 /food 把 sessionStorage里面的 totalPrice shopList carList删除掉
            if(oldVal === '/food'){//反过来就是上一次是/food就删除
               sessionStorage.removeItem('totalPrice')
               sessionStorage.removeItem('shopList')
               sessionStorage.removeItem('carList')
            }

            //设置导航栏图标 以及导航栏的显示与否  
           //以及判断登陆与否 设置islogin 用户名不存在即为没有登陆
           if(val === '/home'){

                this.selected = this.home

               
           }else if(val === '/car'){
                this.selected = this.car
           }else if(val === '/person'){
                this.selected = this.person
           }else{
               //其他路由 tabbar都是隐藏的
                this.setState({showTab: false})
           }

            //这里是已经登陆状态，再访问登陆页面，先提示是否退出当前登陆
            if(val === '/login'){
                if(this.isLogin) {      
                     //此时在已经登陆的状态
                    this.goB()
                    this.msgInfo('您已经登陆，是否退出当前账号？', '/login')
                }
            }

           //这里是访问 个人中心的 订单 积分 会员灯列表
            if( val === '/cash' || val === '/coupon'|| val === '/order/1' ||
                val === '/order/0' || val === '/credit'||
                val === '/member' || val === '/food'){
                //true  已经登陆
                if(!this.isLogin) {

                    //先返回上一级
                    this.goB()
                    //否则执行下面逻辑
                    this.msgInfo('您还没有登陆，请先登陆', '/login')

                }
            }

            //这是访问 自己的店铺裂变，type不是商家不能访问
            if(val === '/setShop' || val === '/shop'){
                

                if(!this.isLogin){
                     //先返回上一级
                    this.goB()
                    return this.msgInfo('您还没有登陆，请先登陆', '/login')
                }
                 if(this.type != '商家'){
                         //先返回上一级
                        this.goB()                       
                        this.msgInfo('是否想成为商家？', '/setShop')
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
    #main{
        .mint-tab-container{
            padding-bottom: 60px;
        }
        .mint-tabbar{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 55px;
        }
    }
</style>

